<template>
  <div class="order-list-item">
    <div class="order-list-item-l1 van-hairline--bottom" @click.stop="handleRouteToStore">
      <div class="order-list-item-store">
        <van-icon name="shop-o" :size="20"/>
        <span class="order-list-item-store-name">{{ order.storeName }}</span>
      </div>
      <div class="order-list-item-status">{{ statusLabel }}</div>
    </div>
    <white-space/>
    <order-item v-for="item in order.items" :key="item.id" :item="item" @click.stop="handleRouteToOrder"/>
    <div class="order-list-item-amounts">
      <div class="subtotal-amount">
        <span class="amount-label">总价</span>
        <price :value="order.subtotalAmount" :size="16"/>
      </div>
      <div class="total-discount-amount">
        <span class="amount-label">优惠</span>
        <price :value="Math.abs(totalDiscountTotalPrice)" :size="16"/>
      </div>
      <div class="total-amount">
        <span class="amount-label">实付款</span>
        <price :value="order.totalAmount" color="#000" :size="16"/>
      </div>
    </div>
    <white-space/>
    <div class="van-hairline--top order-list-item-actions">
      <order-actions :order="order" @receipt="$emit('receipt')" @cancel="$emit('cancel')"/>
    </div>
  </div>
</template>

<script>
import { order } from "@mall/api-services"
import OrderItem from "@/components/order/OrderItem"
import { getStatusLabel } from "@/utils/order"
import { Button, Icon } from "vant"
import WhiteSpace from "@/components/WhiteSpace"
import Price from "@/components/Price"
import OrderActions from "@/components/order/OrderActions"

export default {
  name: "OrderListItem",
  components: {
    OrderActions,
    Price,
    WhiteSpace,
    OrderItem,
    [Button.name]: Button,
    [Icon.name]: Icon,
  },
  props: {
    order: order.Order,
  },
  computed: {
    statusLabel() {
      const { order } = this
      return getStatusLabel(order.status)
    },
    totalDiscountTotalPrice() {
      const { order } = this
      const { totalDiscountTotalPrice, totalDiscountShippingCost } = order
      return totalDiscountTotalPrice + Math.abs(totalDiscountShippingCost)
    },
  },
  methods: {
    handleRouteToStore() {
      const { order } = this
      this.$router.push(`/stores/${order.storeId}`)
    },
    handleRouteToOrder() {
      const { order } = this
      this.$router.push(`/orders/${order.id}`)
    },
  },
}
</script>

<style lang="scss" scoped>
@import "../../styles/variables";

.order-list-item {
  background: #fff;
  margin-bottom: 9px;
}

.order-list-item-l1 {
  padding: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1rem;

  .order-list-item-store {
    display: inline-flex;
    align-items: center;

    .order-list-item-store-name {
      margin-left: 4px;
      font-weight: 700;
      line-height: 1rem;
    }
  }

  .order-list-item-status {
    font-size: 13px;
    color: $danger-color;
  }
}

.order-list-item-amounts {
  display: flex;
  justify-content: flex-end;
  padding: 0 9px;

  .amount-label {
    margin-right: 4px;
    font-size: 14px;
  }

  .subtotal-amount, .total-discount-amount, .total-amount {
    display: inline-flex;
    align-items: flex-end;

  }

  .subtotal-amount, .total-discount-amount, {
    color: $gray-6;
    margin-right: 9px;

    .price {
      color: $gray-6;;
    }
  }
}

.order-list-item-actions {
  padding: 9px;
  display: flex;
  justify-content: flex-end;

  .van-button {
    margin-left: 9px;
    width: 72px;
  }
}
</style>
